<template>
    <div>
        <!-- 搜索区 -->
        <el-form :inline="true" size="small" ref="form" label-width="80px" >
            <el-form-item label="物品类型">
                <el-select v-model="params.type" placeholder="请选择" clearable>
                    <el-option v-for="item in goods" :key="item.id" :label="item.name" :value="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关键字">
                <el-input v-model="params.name" placeholder="请输入关键字" clearable></el-input>
            </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table :data="inventory.list" border style="width: 100%;margin-left: 16px;" size="small" @row-click="toShowHandler">
            <el-table-column fixed type="index" align="center" label="序号" width="80"></el-table-column>
            <el-table-column fixed label="申请人" align="center">
                <template slot-scope="scope">
                    {{scope.row.baseUser.realname}}
                </template>
            </el-table-column>
            <el-table-column prop="asset.code" label="物品编码" align="center"></el-table-column>
            <el-table-column prop="asset.name" label="物品名称" align="center"></el-table-column>
            <el-table-column prop="asset.type" label="物品类型" align="center"></el-table-column>
            <el-table-column prop="type" label="申请类别" align="center"></el-table-column>
            <el-table-column prop="asset.brand" label="品牌" align="center"></el-table-column>
            <el-table-column prop="asset.num" label="数量" align="center"></el-table-column>
            <el-table-column prop="applyforTime" label="领用日期" align="center" width="150">
                <template slot-scope="scope">
                    {{scope.row.applyforTime | dateFormat}}
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                    <el-tag size="small">{{scope.row.status}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-link @click="returnHander(scope.row)">归还</el-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            layout="total, prev, pager, next"
            @current-change="pageHandler"
            :page-size="inventory.pageSize"
            :current-page="inventory.page"
            :total="inventory.total">
        </el-pagination>

        <!-- 归还模态框 -->
        <el-dialog title="确认归还" :visible.sync="dialogVisible" width="50%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="使用人" v-if="goods_row.baseUser">
                            {{goods_row.baseUser.realname}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="使用部门" v-if="goods_row.department">
                            {{goods_row.department.name}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="申请日期">
                            {{goods_row.applyforTime | dateFormat}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="物品名称" v-if="goods_row.asset">
                            {{goods_row.asset.name}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="使用日期">
                    <div>{{goods_row.useTime | dateFormat}}</div>
                </el-form-item>
                <el-form-item label="预计归还日期">
                    <div>{{goods_row.estimatedReturnTime | dateFormat}}</div>
                </el-form-item>
                <el-form-item label="借用数量">
                    <div>{{goods_row.num}}</div>
                </el-form-item>
                <el-form-item label="借用事由">
                    <div>{{goods_row.reason}}</div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveHandler">确定归还</el-button>
            </span>
        </el-dialog>

        <!-- 抽屉详情 -->
        <el-drawer :title="title" :visible.sync="drawer" direction="rtl">
            <el-table :data="row.list" style="width: 100%;margin-left: 16px;" size="small" @row-click="toShowHandler(row)">
                <el-table-column fixed type="index" align="center" label="序号" width="50"></el-table-column>
                <el-table-column fixed label="申请人" align="center" width="80">
                    <template slot-scope="scope">
                        {{scope.row.baseUser.realname}}
                    </template>
                </el-table-column>
                <el-table-column prop="asset.code" label="物品编码" align="center" width="100"></el-table-column>
                <el-table-column prop="asset.name" label="物品名称" align="center"></el-table-column>
                <el-table-column prop="asset.type" label="物品类型" align="center"></el-table-column>
                <el-table-column prop="type" label="申请类别" align="center"></el-table-column>
                <el-table-column prop="asset.brand" label="品牌" align="center"></el-table-column>
                <el-table-column prop="asset.num" label="数量" align="center"></el-table-column>
                <el-table-column prop="applyforTime" label="领用日期" align="center" width="150">
                    <template slot-scope="scope">
                        {{scope.row.applyforTime | dateFormat}}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                        <el-tag size="small">{{scope.row.status}}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>


    </div>
</template>

<script>
import request from '@/utils/request'
import qs from 'qs'
// import moment from 'moment'
import { mapActions ,mapState} from 'vuex'
export default {
    data() {
        return {
            drawer: false,
            direction: 'rtl',
            fileList:[],
            inventory:[],
            row: [],
            params: {
                page: 1,
                pageSize: 5,
                applyforType: '借用',
                // checkStatus: '通过'
            },
            goods: [],
            dialogVisible: false,
            title: '',
            form: {},
            userInfo:'',
            detailsForm: {},
            detailsDialogVisible: false,
            goods_row: '',
            batchDialogVisible: false,
            batchForm: {},
            param: {
                page: 1,
                pageSize: 100,
            }
        }
    },
    created() {
        // this.queryAssetDeatils(this.params)
        // 分页查询物品信息
        this.queryAsset(this.params)

        // 查询所有物品类型
        this.findAllGoods()

        // 获取经办人信息
        this.getInfo()

    },
    computed: {
        ...mapState('user',['user'])
    },

    watch: {
        params: {
            handler: function() {
                this.queryAsset(this.params)
            },
            deep: true
        }
    },

    methods: {
        ...mapActions('user',['getInfo']),
        // 详情
        toShowHandler(row) {
            this.drawer = true
            this.title = "物品使用详情-"+row.asset.name
            this.param.assetId = row.asset.id
            this.queryAssetDeatils(this.param)
        },
        // 归还
        returnHander(row) {
            this.dialogVisible = true;
            this.goods_row = row
        },
        // 出库
        saveHandler(applyforId) {
            request.get("/applyfor/giveBack",{params:{applyforId}}).then(res => {
                this.$message({
                    message: res.message,
                    type: 'success'
                })
                this.queryAsset(this.params)
            })
        },

        dateFormat(row, column, cellValue, index) {
            console.log(cellValue)
            return moment(cellValue).format('YYYY-MM-DD HH:mm:ss');
        },

        // 查询所有物品类型
        findAllGoods() {
            request.get("/assetType/findAll").then(res => {
                this.goods = res.data
            })
        },
        
        // 分页查询
        queryAsset() {
            console.log(this.params)
            request.post("/applyfor/pageQuery",qs.stringify(this.params)).then(res => {
                this.inventory = res.data
            })
        },
        queryAssetDeatils() {
            console.log(this.params)
            request.post("/applyfor/pageQuery",qs.stringify(this.param)).then(res => {
                this.row = res.data
            })
        },

        // 分页
        pageHandler(page) {
            this.params.page = page
        }
    }
}
</script>

<style scoped>
    .el-drawer .rtl {
        width: 45% !important;
    }
    .el-link:hover {
        color: #88d3e5;
        border-bottom: 0;
    }
    .el-link {
        font-size: 12px;
        color: #6bc9df;
    }
    .el-row {
        margin-bottom: 1rem;
    }
    .warn {
        color: #ff0000;
        font-size: 12px;
    }
    .download {
        color: #51c1d9;
        margin: 1rem 0 1rem 1rem;
    }
    .download:hover {
        color: #85d3e4;
    }
    .el-table {
        margin-top: 1rem;
    }
    .el-form-item >>> .el-form-item__label {
        height: 30px;
    }
    .el-form-item__content {
        height: 30px;
    }
    .details_img {
        /* float:right; */
        border: 1px solid #ccc;
        width: 120px;
        height: 120px;
        position: absolute;
        top: 6rem;
        right: 4rem;
        border-radius: 5px;
        padding: 5px;
    }
    .details_img img {
        width: 110px;
        height: 110px;
    }
    .el-dialog__body {
        position: relative;
    }
    .el-form-item {
        margin-bottom: 0;
        height: 30px;
    }
    .el-icon-edit {
        margin: 0 .5rem;
    }
    .el-dialog__wrapper >>> .el-dialog__header{
        background-color: #55c1d9;
    }
    .el-dialog__wrapper >>> .el-dialog__header span,.el-dialog__wrapper >>> .el-icon-close{
        color: #fff;
    }
</style>